import SwiftUI

struct CustomPaginationView: View {
    @Binding var currentIndex: Int
    let totalPages: Int
    let visibleCount: Int = 8  // 默认显示6个指示器

    var body: some View {
        VStack {
            Spacer()

            HStack(spacing: 8) {
                // 计算显示的分页索引范围
                let startIndex = max(0, currentIndex - visibleCount / 2)
                let endIndex = min(startIndex + visibleCount, totalPages)

                // 生成分页指示器
                ForEach(startIndex..<endIndex, id: \.self) { index in
                    PaginationIndicator(index: index, currentIndex: $currentIndex)
                }
            }
            .padding(.top, 10)
        }
        .frame(maxWidth: .infinity)
    }
}

struct PaginationIndicator: View {
    let index: Int
    @Binding var currentIndex: Int
    
    @State private var showNumber: Bool = false
    
    var body: some View {
        ZStack {
            // 背景圆圈
            Circle()
                .fill(currentIndex == index ? Color.white : Color.gray)
                .frame(width: 10, height: 10)  // 增大圆圈尺寸
                .scaleEffect(currentIndex == index ? 1.6 : 1.0)
                .opacity(currentIndex == index ? 1.0 : 0.6)
                .animation(.easeInOut(duration: 0.4), value: currentIndex)
            
            // 显示当前页码数字
            if currentIndex == index {
                Text("")  // 显示当前页码
                    .foregroundColor(.black)
                    .font(.system(size: 12, weight: .bold))
                    .opacity(showNumber ? 1.0 : 0.0)  // 控制数字的透明度
                    .scaleEffect(showNumber ? 1.0 : 0.8)  // 控制数字的缩放
                    .animation(.easeInOut(duration: 0.4), value: showNumber)
                    .onAppear {
                        // 当数字出现时，触发动画
                        withAnimation {
                            showNumber = true
                        }
                    }
                    .onDisappear {
                        // 当数字消失时，触发动画
                        withAnimation {
                            showNumber = false
                        }
                    }
            }
        }
        .onTapGesture {
            // 点击指示器切换页面
            currentIndex = index
        }
    }
}

struct ContentView1: View {
    @State private var currentIndex: Int = 0
    let totalPages: Int = 10

    var body: some View {
        VStack {
            // 模拟滑动内容
            TabView(selection: $currentIndex) {
                ForEach(0..<totalPages, id: \.self) { index in
                    Text("Page \(index + 1)")
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .background(Color.blue.opacity(0.2))
                        .tag(index)
                }
            }
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
            .frame(height: 300)

            // 自定义分页指示器
            CustomPaginationView(currentIndex: $currentIndex, totalPages: totalPages)
        }
    }
}

#Preview {
    ContentView1()
        .background(.black)
}
